<template>
  <view class="preView">
    <swiper circular :current="currentIndex" @change="swiperChange">
      <swiper-item v-for="(item,index) in classList" :key="item._id">
        <image v-if="readImgs.includes(index)" @click="maskChange" :src="item.picurl" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <div class="mask" v-if="maskFlag">
      <div class="goBack" :style="{top:getStatusBarHeight()+'px'}" @click="goBack">
        <uni-icons class="back" type="back" color="#fff" size="20"></uni-icons>
      </div>
      <div class="count">{{currentIndex + 1}} / {{classList.length}}</div>
      <div class="time">
        <uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
      </div>
      <div class="date">
        <uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
      </div>
      <div class="footer">
        <div class="box" @click="getInfo">
          <uni-icons type="info" size="30"></uni-icons>
          <div class="text">信息</div>
        </div>
        <div class="box" @click="clickScore">
          <uni-icons type="heart" size="30"></uni-icons>
          <div class="text">{{currentInfo.score}}分</div>
        </div>
        <div class="box" @click="downLoad">
          <uni-icons type="cloud-download" size="30"></uni-icons>
          <div class="text">下载</div>
        </div>
        
      </div>
    </div>
    
    <uni-popup ref="InfoPopup" type="bottom">
      <div class="infoPopup">
        <div class="popHeader">
        <div></div>
        <div class="title">壁纸信息</div>
        <div class="close" @click="clickClose">
          <uni-icons type="closeempty" size="18" color="#999"></uni-icons>
        </div>
      </div>
      <scroll-view scroll-y="true" >
        <view class="content">
          <div class="row" >
            <div class="label">分类</div>
            <text selectable class="value">明星美女</text>
          </div>
          <div class="row" >
            <div class="label">发布者</div>
            <text selectable class="value">{{currentInfo.nickname}}</text>
          </div>
          <div class="row" >
            <div class="label">评分</div>
            <view class="Score">
              <uni-rate v-model="value" :value="currentInfo.score" @change="onChange"/>
              <text class="score">{{currentInfo.score}}分</text>
            </view>
          </div>
          <div class="row" >
            <div class="label">摘要</div>
            <text selectable class="value">{{currentInfo.description}}</text>
          </div>
          <div class="row" >
            <div class="label">标签</div>
            <text selectable class="value">明星美女</text>
          </div>
        </view>
      </scroll-view>
    
      </div>
    </uni-popup>  
    
    <!-- 评分弹窗 -->
    <uni-popup ref="scorePopup" type="center" :is-mask-click="false">
      <div class="scorePopup">
        <div class="popHeader">
          <div></div>
          <div class="title">{{isScore?'评分过了~':'壁纸评分'}}</div>
          <div class="close" @click="clickScoreClose">
            <uni-icons type="closeempty" size="18" color="#999"></uni-icons>
          </div>
        </div>
        <div class="content">
          <uni-rate v-model="currentInfo.score"  allowHalf disabled="isScore" disabled-color="#FFCA3E"/>
          <div class="text">{{currentInfo.score}}分</div>
        </div>
        <div class="footer">
          <button type="default" size="mini" plain :disabled="!userScore || isScore" @click="putScore">确定评分</button>
        </div>
      </div>
    </uni-popup>
  </view>
</template>

<script setup>
  import {ref} from 'vue';
  import {onLoad} from '@dcloudio/uni-app';
  import { getStatusBarHeight } from '../../utils/system';
  import {apiGetScore} from '../../api/apis.js'
  const maskFlag=ref(true)
  const InfoPopup=ref(null)
  const scorePopup=ref(null)
  const userScore=ref(5)
  const classList = ref('')
  const currentId=ref(null)
  const currentIndex = ref(0)
  const readImgs = ref([])
  const currentInfo = ref(null)
  const isScore = ref(false)
  // 获取数据
  const preList = uni.getStorageSync("storageClass")||[]
  // 将获取数据进行处理
  classList.value = preList.map(item=>{
	  return{
		  ...item,
		  picurl:item.smallPicurl.replace("_small.webp",".jpg")
	  }
  })
  
  onLoad((e)=>{
	  currentId.value=e.id;
	  currentIndex.value = classList.value.findIndex(item=>item._id == currentId.value)
    currentInfo.value=classList.value[currentIndex.value]
    lazyImag()
  })
  
  // 滑动切换第几张
  const swiperChange = (e)=>{
	  currentIndex.value=e.detail.current
    currentInfo.value=classList.value[currentIndex.value]
    lazyImag()
  }
  
  // 图片懒加载处理逻辑
  const lazyImag = ()=>{
    readImgs.value.push(
    currentIndex.value-1<=0?classList.value.length-1:currentIndex.value-1,
    currentIndex.value,
    currentIndex.value+1>=classList.value.length?0:currentIndex.value+1)
    readImgs.value=[...new Set(readImgs.value)]
  }
  // 遮罩
  const maskChange=()=>{
    maskFlag.value=!maskFlag.value
  }
  // 关闭弹窗
  const clickClose=()=>{
    InfoPopup.value.close();
  }
  // 关闭评分模块
  const clickScoreClose=()=>{
    scorePopup.value.close();
    userScore.value=0;
  }
  // 弹窗
const getInfo = () => {
    InfoPopup.value.open();
};
// 打开评分弹窗
const clickScore = () => {
  if(currentInfo.value.userScore){
    isScore.value = true;
    userScore.value=currentInfo.value.userScore
  }
  userScore.value=0;
    scorePopup.value.open();
};

// 提交评分
const putScore=async()=>{
  uni.showLoading({
    title:'加载中'
  })
  let {classid,_id:wallId} = currentInfo.value;
  let res = await apiGetScore({
    classid,
    wallId,
    userScore:userScore.value
  })
  uni.hideLoading();
  if(res.errCode ===0){
    uni.showToast({
      title:'评分成功',
      icon:'none'
    })
  }
  classList.value[currentIndex.value].userScore = userScore.value
  uni.setStorageSync("storageClass",classList.value)
  clickScoreClose()
}

// 自定义返回
const goBack = ()=>{
  uni.navigateBack();
}

// 下载
const downLoad = ()=>{
  // #ifdef H5
  uni.showModal({
    content:'长按保存',
    showCancel:false
  })
  // #endif
  // #ifndef H5
  uni.getImageInfo({
    src:currentInfo.value.picurl
    success:(res)=>{
      uni.saveImageToPhotosAlbum({
        filePath:res.path,
        success: (res) => {
          console.log(res)
        }
      })
    }
  })
  // #endif
}
</script>

<style lang="scss" scoped>
.preView{
  width: 100%;
  height: 100vh;

  swiper{
    width: 100%;
    height: 100%;
    position: relative;
    image{  
      width: 100%;
      height: 100%;
    }
  }
  .mask{
    &>div{
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      color: #fff; 
      width: fit-content;
    }
    .goBack{
      width: 38px;
      height: 38px;
      background: rgba(0, 0, 0, .5);
      position: absolute;
      top: 0;
      left: 30rpx;
      margin-left: 0;
      border-radius: 100%;
      border: 1rpx solid rgba(255,255,255,.3);
      backdrop-filter: blur(10rpx);
      display: flex;
      align-items: center;
      justify-content: center;
      
    }
    .count{
      top: 10vh;
      background: rgba(0, 0, 0, .3);
      font-size: 28rpx;
      border-radius: 40rpx;
      padding: 8rpx 28rpx;
      backdrop-filter: blur(10rpx);
    }.time{
      font-size: 140rpx;
      top:calc(10vh + 80rpx);
      font-weight: 100;
      line-height: 1em;
      text-shadow: 0 4rpx rgba(0, 0, 0, .3);
    }.date{
      font-size: 34rpx;
      top:calc(10vh + 230rpx);
      text-shadow: 0 2rpx rgba(0, 0, 0, .3);
      
    }.footer{
      background: #eee;
      bottom: 10vh;
      width: 65vw;
      height: 120rpx;
      border-radius: 120rpx;
      color: #000;
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-shadow: rgba(0, 0, 0, .3);
      backdrop-filter: blur(20rpx);
      .box{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rpx 12rpx;
        .text{
          font-size: 26rpx;
          color: $text-font-color-2;
        }
      }
    }
  }
  .popHeader{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title{
      color: $text-font-color-2;
      font-size: 26rpx;
      
    }
    .close{
      padding: 6rpx;
    }
  }
  .infoPopup{
    background-color: #fff;
    padding: 30rpx;
    border-radius: 30rpx 30rpx 0 0;
    overflow: hidden;
    .close{
      padding: 6rpx;
    }
  }
    scroll-view{
      max-height: 60vh;
      .content{
        .row{
          display: flex;
          padding: 16rpx 0;
          font-size: 32rpx;
          line-height: 1.7em;
          .label{
            color: $text-font-color-3;
            font-size: 30rpx;
            width: 140rpx;
            text-align: center;
          }
          .value{
            flex: 1;
            width: 0;
          }
          .Score{
            display: flex;
            justify-content: center;
            align-items: center;
            .score{
              margin-left: 10rpx;
            }
          }
        }
      }
    }
  .scorePopup{
    background-color: #fff;
    padding: 30rpx;
    border-radius: 30rpx ;
    width: 70vw;
    overflow: hidden;
    .content{
      padding: 30rpx 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text{
        color: #ffca3e;
        padding-left: 10rpx;
        width: 80rpx;
        line-height: 1em;
      }
    }
    .footer{
      padding: 10rpx 0;
      text-align: center;
    }
  }
}

</style>
